<template>
  <div class="wrap">
    <!-- 左边 -->
    <div id="left" class="left">
      <!-- 大标题 -->
      <div class="title" v-if="!isLogin">{{ title }}</div>
      <div class="myself" v-if="isLogin">
        <el-avatar
          shape="square"
          size="large"
          src="http://sdn.geekzu.org/avatar/742221f825d76845761fee10007b1a3a?s=64&d=mm&r=g"
        ></el-avatar>
        <div>
          <span>{{ userInfo.nickName }}</span>
          <span>vip {{ userInfo.vip }}</span>
        </div>
      </div>

      <!-- 菜单 -->
      <div class="menu" v-for="item in indexItem" :key="item.menuTitle.id">
        <!-- 菜单标题 -->
        <span>{{ item.menuTitle.titleName }}</span>
        <!-- 菜单项 -->
        <ul>
          <li v-for="i in item.menuItem" :key="i.Id">
            <img :src="baseURL + i.iconUrl" />
            <!-- <a href="">{{ i.name }}</a> -->
            <router-link :to="'/' + i.path">{{ i.name }}</router-link>
          </li>
        </ul>
      </div>
    </div>

    <!-- 中间 -->
    <div id="mid" class="mid">
      <!-- 搜索栏 -->
      <div class="search">
        <el-autocomplete
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect"
          clearable
          hide-loading
          @keyup.enter.native="searchEnter($event)"
          ref="inputSearchRef"
        >
          <template v-slot="{ item }">
            <span>{{ item.name }}</span>
          </template>
        </el-autocomplete>
      </div>
      <!-- 内容区（更换） -->
      <router-view @songObj="getSongObj"></router-view>
    </div>

    <!-- 右边 -->
    <div id="right" class="right">
      <!-- 通知 -->
      <div class="notifications">
        <!-- 通知头 -->
        <div class="noti-hd">
          <span>通知</span>
          <span>· ·</span>
        </div>
        <!-- 通知列表 -->
        <ul>
          <li v-for="item in notifications" :key="item.id">
            <img :src="baseURL + item.picUrl" alt="" />
            <div>
              <p>{{ item.title }}</p>
              <p>{{ item.value }}</p>
            </div>
            <span>{{ item.time }}</span>
          </li>
        </ul>
      </div>
      <!-- 热门作者 -->
      <div class="hot_artists">
        <div class="hot_artists_hd">
          <span>热门作品</span>
          <span>· ·</span>
        </div>
        <!-- 作者列表 -->
        <ul>
          <li v-for="item in hotArtists" :key="item.id">
            <img :src="item.pic" alt="" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
      <!-- 播放器 -->
      <div class="player-mini">
        <music-palyer-mini :songObj="songObj"></music-palyer-mini>
      </div>
    </div>
  </div>
</template>

<script>
import MusicPalyerMini from './MusicPalyerMini.vue'
export default {
  components: { MusicPalyerMini },
  data() {
    return {
      // 用户信息
      userInfo: {
        avatar: '',
        username: '',
        vip: ''
      },
      // 是否已经登录
      isLogin: true,
      restaurants: [],
      state: '',
      timeout: null,
      baseURL: 'http://localhost:5500/',
      // baseURL: 'http://172.28.34.35:5500/',
      // 网站标题
      title: '老王听书',
      // 菜单title
      indexItem: [],
      // 右边
      notifications: [],
      hotArtists: [],
      songObj: {}
    }
  },
  created() {
    this.getUserInfo()
  },
  mounted: function() {
    this.getMenu()
    this.getNotifications()
    this.getIsLogin()
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      const sessionUsername = sessionStorage.getItem('username')
      console.log(sessionUsername)
      const { data: res } = await this.$http.post(
        'http://localhost:3000/api/users/userinfo',
        {
          username: sessionUsername
        }
      )
      // console.log(res.data[0])
      this.userInfo = res.data[0]
    },
    // 获取登录状态
    getIsLogin() {
      this.isLogin = sessionStorage.getItem('isLogin')
    },
    getSongObj: function(data) {
      // console.log(data)
      this.songObj = data
    },
    // cblur(e, t) {},K
    searchEnter: function(event) {
      this.$refs.inputSearchRef.activated = false
      // this.isOnComposition = false;
      // this.$refs.input2.focus()
      // console.log(event)
      // $('.el-popper').css('display', 'none')
      event.target.blur()
      // this.$refs.input.activated = true
      if (this.$route.path === '/search') {
        if (this.$route.query.sname !== this.state) {
          this.$router.push({ path: '/search?sname=' + this.state })
        }
      } else {
        this.$router.push({ path: '/search', query: { sname: this.state } })
      }
    },
    async querySearchAsync(queryString, cb) {
      // 获取推荐列表
      var results = []
      if (queryString) {
        // 搜索书籍
        const { data: res } = await this.$http.get(
          'api/search_song.php?sname=' + queryString
        )
        results = res
        // results = restaurants.filter(this.createStateFilter(queryString))
      } else {
        const { data: tjsong } = await this.$http.get('api/getSearchSong.php')
        this.restaurants = tjsong
        var restaurants = this.restaurants
        if (restaurants === '') {
          results = [{ name: '暂无数据' }]
        } else {
          results = restaurants
        }
      }
      if (results[0].msg === '0') {
        const arr1 = [{ name: '暂无数据' }]
        cb(arr1)
      } else {
        cb(results)
      }
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        )
      }
    },
    handleSelect(item) {
      if (this.$route.path === '/search') {
        if (this.$route.query.sname !== item.name) {
          this.$router.push({ path: '/search?sname=' + item.name })
        }
      } else {
        this.$router.push({ path: '/search', query: { sname: item.name } })
      }
    },
    // 数组去重
    unique: function(arr) {
      return Array.from(new Set(arr))
    },
    getMenu: async function() {
      const { data: res } = await this.$http.get('api/getMenu.php')
      this.indexItem = res
    },
    getNotifications: async function() {
      const resultNoti = await this.$http.get('api/get-index-notifications.php')
      const resultHotart = await this.$http.get('api/get_artists.php')
      this.notifications = resultNoti.data.indexNotifications
      this.hotArtists = resultHotart.data
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  width: 1300px;
  height: 880px;
  margin: auto;
  /*水平居中*/
  // position: relative;
  // top: 50%;
  // margin-top: calc((100vh - 880px) / 2);
  /*偏移*/
  // transform: translateY(-50%);

  background-color: #ffffff;
  border-radius: 10px;

  // =========== 左边 ===========
  .left {
    width: 210px;
    border-right: 1px rgba(68, 62, 62, 10%) solid;

    .title {
      color: #303e65;
      font-weight: 900;
      font-size: 20px;
    }
    .myself {
      display: flex;
      align-items: center;
      // justify-content: space-around;
      .el-avatar {
        margin-right: 20px;
        margin-bottom: 0;
      }

      span:nth-child(1) {
        font-size: 20px;
        margin-right: 10px;
      }

      span:nth-child(2) {
        padding: 2px;
        font-size: 14px;
        border: 1px solid #fba30b;
        color: #fba30b;
        border-radius: 5px;
      }
    }

    > div {
      margin: 20px;
      font-size: 16px;
      color: #7c8db5;

      > span {
        display: block;
        margin-bottom: 10px;
      }

      li {
        display: flex;
        align-items: center;
        height: 25px;
        margin: 5px 0;
        font-size: 14px;

        img {
          height: 15px;
          margin-right: 10px;
        }

        a {
          color: #303e65;
        }
      }
    }
  }
  // =========== 左边 ===========
  .mid {
    padding: 20px;
    width: 800px;
    border-right: 1px rgba(68, 62, 62, 10%) solid;

    .search {
      margin-bottom: 10px;
    }
  }

  // =========== 右边 ===========
  .right {
    position: relative;
    padding: 20px;
    width: 260px;

    // 通知
    .notifications {
      font-size: 16px;
      color: #303e65;

      .noti-hd {
        height: 25px;
        font-weight: 900;

        span:nth-child(2) {
          float: right;
          color: #7c8db5;
        }
      }

      li {
        height: 40px;
        font-size: 14px;
        margin-top: 20px;

        img {
          float: left;
          padding: 10px;
          height: 20px;
          background-color: #f2f7ff;
          border-radius: 10px;
        }

        div {
          float: left;
          margin-left: 15px;

          p:nth-child(1) {
            font-size: 14px;
            font-weight: 900;
          }

          p:nth-child(2) {
            font-size: 12px;
            color: #7c8db5;
            font-weight: 900;
          }
        }

        span {
          float: right;
          color: #7c8db5;
          line-height: 40px;
        }
      }
    }

    // 热门作者
    .hot_artists {
      margin-top: 40px;
      font-size: 16px;
      color: #303e65;

      .hot_artists_hd {
        height: 25px;
        font-weight: 900;

        span:nth-child(2) {
          float: right;
          color: #7c8db5;
        }
      }

      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        li {
          margin-top: 20px;
          width: 70px;

          img {
            width: 70px;
            border-radius: 10px;
          }

          p {
            font-size: 14px;
            color: #303e65;
            text-align: center;
          }
        }
      }
    }

    // 播放器
    .player-mini {
      // display: flex;
      // margin: 50px;
      position: absolute;
      top: 48%;
      right: -25%;
      // transform: translateX(50%);
      // background: #303e65;
      transform: scale(0.55);
    }
  }
}
</style>
